<template>
  <div>
    <div class="node" v-has="{action: 'wx:user:list', effect: 'move'}">
      <div :class="[$style.search_box, $style.topSelect]">
       
      <div :class="$style.searchBox1" style="margin-left: 20px">
        <el-button size="small" plain icon="el-icon-search" @click="queryData">查询</el-button>        
      </div>
      </div>
    <Panel title="用户列表" :intro="intro">
      <TableEncapsulation
        slot="body"
        :changeSelectRow="(ids) => multipleSelection = ids"
        :tableConfig="tableConfig"
        :tableData="tableData"
      >
        <template slot="operation" slot-scope="operation">
         <el-button size="mini" icon="el-icon-money"  @click="()=>balance(operation.row)">余额管理</el-button>
          <el-button size="mini" icon="el-icon-s-order"  @click="()=>nav(operation.row.id)">充值订单</el-button>
        </template>
        <TablePager
          slot="pager"
          v-if="pager.use"
          :size="pager.size"
          :pageChange="pageChange"
          :show-total="pager.showTotal"
          :total="pager.total"
          :current="pager.current"
        >
          <span class="demonstration">GO></span>
        </TablePager>
      </TableEncapsulation>
    </Panel>
    </div>
    <div style="display: none;width:100%;height:100%;margin: auto;" v-has="{action: 'wx:user:list', effect: 'noPremiss'}">
      <NoPremission></NoPremission>
    </div>
  </div>
</template>

<script>
import request from "@/tools/request";
import Panel from "@/components/Panel";
import TableEncapsulation from "@/components/TableEncapsulation";
import SearchInput from "@/components/SearchInput";
import TablePager from "@/components/Pager";
import ModifyForm from "@/components/ModifyForm";
import ModalPanel from "@/components/ModalPanel";
import { objectFilter } from "@/tools/array";

export default {
  name:'wxUser',
  components: {
    Panel,
    TableEncapsulation,
    SearchInput,
    TablePager,
    ModalPanel,
    ModifyForm
  },
  data() {
    return {
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      intro:{
        title:'微信用户列表说明文档',
        content: `<ul><li class="ql-align-justify">中装天如小程序注册用户列表，可查看用户绑定车牌号，余额和冻结金额（用户预扣金额）</li></ul><p class="ql-align-justify"><br></p><ul><li class="ql-align-justify"><strong>操作：</strong></li><li class="ql-align-justify">余额管理：查看用户余额日志，充电消费，充值，购买优惠价/套餐或其他消费</li><li class="ql-align-justify">充值订单：查看充值订单，可在订单中向用户<strong>发起主动退款</strong>，退款金额不能超过充值金额，退款时间不能超过微信支付规定的时间（一年）</li></ul>`
      },
      searchs:{
        component: 'user',
        name:"",
        phone:"",
        plate: "",
      },
      appointmentTime: null,
      keywords: '',
      topUpEditColumn: [
        {
          name: "操作对象",
          prop: "userName",
          slotName: "userName",
          type: "other",
          width: 24,
        },
        {
          name: "类型",
          prop: "type",
          type: "other",
          slotName: "type",
          width: 24,
          required: true
        },
        {
          name: "金额",
          prop: "amount",
          type: "number",
          width: 24,
          required: true
        }
      ],
      operation: true,
      account: "",
      accountStatus: "",
      multipleSelection: [],
      nickName: "",
      pager: {
        component: 'user',
        use: true,
        total: 0,
        current: 1,
        size: 10,
        showTotal: true
      },
      tableData: [],
      page:1
    };
  },
  computed: {
    tableConfig() {
      return {
        selection: false,
        columnConfig: [
          {
            label: "用户ID",
            type: "text",
            prop: "id",
            align: "center"
          },
          {
            label: "手机号码",
            type: "text",
            prop: "phone",
            align: "center"
          },
          {
            label: "用户类型",
            type: "other",
            prop: "stationState",
            align: "center",
            fnc: val => val == 100 ? "原价用户" : val ==200 ? "普通用户": val ==300 ? 'VIP用户': val ==400 ? '车队用户': val ==500 ? '互联互通': "未知",
            // class:val => val == 1 ? "agree" : val == 2 ? "cancel" : val == 4 ? "out-off" : "cancel" ,
            width: 80
          },
          {
            label: "邀请码",
            type: "text",
            prop: "inviteCode",
            align: "center"
          },
          {
            label: "余额",
            type: "text",
            prop: "balance",
            align: "center"
          },
          {
            label: "积分",
            type: "text",
            prop: "score",
            align: "center"
          },
          {
            label: "积分倍率",
            type: "text",
            prop: "scoreMultiplyRate",
            align: "center"
          },
          {
            label: "订单数量",
            type: "text",
            prop: "orderCount",
            align: "center"
          },
          {
            label: "上月电量",
            type: "text",
            prop: "lastElecQuantity",
            align: "center"
          },
          {
            label: "本月电量",
            type: "text",
            prop: "thisElecQuantity",
            align: "center"
          },
          {
            label: "是否退款中",
            type: "other",
            prop: "refundIng",
            align: "center",
            fnc: val => val  ? "是" :  "否",
            // class:val => val == 1 ? "agree" : val == 2 ? "cancel" : val == 4 ? "out-off" : "cancel" ,
            width: 80
          },
          {
            label: "上次登录",
            type: "text",
            prop: "lastLoginTime",
            align: "center"
          },
         
          // this.operation && {
          //   type: "operation",
          //   align: "center",
          //   label: "操作"
          // }
        ].filter(Boolean)
      };
    }
  },
  methods: {
    searchsFnc (){
      let searchs = this.$store.getters.searchs
      if(searchs &&searchs.component == 'user'){
        this.searchs = searchs
      }
      let pager = this.$store.getters.pager
      if(pager &&pager.component == 'user'){
        this.pager = pager
      }
    },
    nav(id){
      this.$router.push({
        path: '/user/refund',
        query: {
          id:id,
        }
      })
    },
    changeSearch(key, val) {
      this.searchs[key] = val;
      this.query.page = 1;
    },
    balance(rowData) {
      this.$store.commit('saveSearchs', this.searchs)
      this.$store.commit('savePager', this.pager)
      this.$router.push({
        path: "/wx/user/balance",
        query: {
          userId: rowData.id
        }
      })
    },
    changeKeuWord(val){
      this.keywords = val
      this.pager.current=1
    },
    pageChange(val) {
      this.pager.current = val
      this.queryData()
    },

    async queryData(){
      let current = this.pager.current
      let size = this.pager.size
      let search = objectFilter({size, current })
      let res = await request({
        url: "/manage/client/user/query",
        method: "POST",
        data: search
      });
      this.tableData = res.data.records
      this.pager.total = res.data.total
      this.pager.current = res.data.current
      // this.$set(this.pager,'total',res.total>>>0)
    },
  }, 
  created() {
     this.searchsFnc()
    this.queryData()
  }
};
</script>

<style lang='scss' module>
.modifyStyle{

}
.search_box {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  // flex-direction: row-reverse;
  
  :global{
    .el-input{
      width: 250px;
    }
    .el-select{
      .el-input{
        width: 90px;
      }
    }
    .el-input__icon{
      line-height: 32px;
    }
  }
}

.topSelect{
  background-color: white;
  border-radius: 4px;
  padding: 20px;
  margin-bottom: 20px;
}

.selectBox {
  :global {
    label {
      font-size: 14px;
      color: #666666;
    }
    .el-input__inner {
      height: 32px;
    }
    .el-input__suffix {
      line-height: 32px;
    }
    .el-date-editor--datetime{
      width: 200px;
    }
  }
}
</style>